<template>
    <div class="shade">

    </div>


    <div style=" background-color: #fff;height: 14vw;">
        <span class="n-title">情侣信息</span>
        <span class="n-addnote">
            <van-icon name="setting" size="6vw" color="#5dacdd" @click="onSetting"/>
        </span>
    </div>

    <div style="height:6px;background-color: rgb(240,240,240);"></div>


    <div class="i-container" v-if="store.user!=null">
        <div class="i-head" >
            <van-image
              round
              fit="cover"
              width="21vw"
              height="21vw"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
        </div>
        <div class="i-info" >
            <div style="font-size: 4.5vw;font-weight:600;">昵称：{{store.user.username}}</div>
            <div>出生日期：{{dateFilter(store.user.birthday)}}</div>
            <div>电话号码：{{store.user.userPhone}}</div>
        </div>
    </div>


    <div class="i-container" style="background-color: #f9cdd4;" v-if="store.lover!=null">
        <div class="i-head">
            <van-image
              round
              fit="cover"
              width="21vw"
              height="21vw"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
            />
        </div>
        <div class="i-info" >
            <div style="font-size: 4.5vw;font-weight:600;">昵称：{{store.lover.username}}</div>
            <div>出生日期：{{dateFilter(store.lover.birthday)}}</div>
            <div>电话号码：{{store.lover.userPhone}}</div>
        </div>
    </div>

    <div v-if="store.loverInfo!=null">---------纪念日：{{dateFilter(store.loverInfo.startTime)}}---------</div>


</template>
  
<script>
// @ is an alias to /src
import {store} from "../utils/store.js"
import {getBirthday} from "../utils/time.js"

export default {
  activated(){
    store.active="info"
    if(!store.queryFlag){
        this.$router.replace("/home/diary")
        store.active="diary"
      }else{
        if(store.loverInfo!=null&&!store.info){
          store.info=true
        }
      }
  },
//   mounted(){
//     store.active="info"
//     if(!store.queryFlag){
//         this.$router.replace("/home/diary")
//         store.active="diary"
//       }else{
//         if(store.loverInfo!=null&&!store.info){
//           store.info=true
//         }
//       }
//   },
  name: 'InfoView',
  data(){
    return{
        store,
    }
  },
  methods:{
    onSetting(){
        this.$router.push("/setting")
    },
    dateFilter(n){
       return getBirthday(n)
    }

  }
}
</script>

<style>
.i-info{
    flex: 1;
    height: 100%;
    margin-left: 5vw;
    text-align: left;
    line-height: 8vw;
    font-size: 4vw;
}

.i-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24vw;
    background-color: rgb(151, 217, 255);
    padding: 2vw 4vw;
    border-radius: 13vw;
    margin: 4vw 4vw;
}

.i-head{
    box-sizing: border-box;
    padding-top: 1vw;
}

.shade{
    background-color:#fff;width: 100vw;;height: 100vh;position: fixed;right: 0;left:0;z-index: -1;
}

</style>


